<template>
    <div id="school">
        <!-- 导航 -->
        <div class="index">
            <div class="index-content">
                <img src="../assets/微信图片_20240516160011-min.png" alt="">
                <div class="index-top">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><router-link to="/yard">院部简介</router-link></li>
                        <li><a href="#">办学特色</a></li>
                        <li><a href="#">专业介绍</a></li>
                        <li><a href="#">领导关环</a></li>
                        <li><a href="#">对外交流</a></li>
                        <li><a href="#">社会服务</a></li>
                        <li><a href="#">师资力量</a></li>
                        <li><a href="#">实训中心</a></li>
                        <li><a href="#">实习基地</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <t-swiper class="tdesign-demo-block--swiper" :duration="300" :interval="2000">
            <t-swiper-item v-for="item in 4" :key="item">
                <div class="demo-item"><img src="../assets/banner-min.png" alt=""></div>
            </t-swiper-item>
        </t-swiper>
        <!-- 院部新闻 -->
        <div class="new">
            <div class="new-content">
                <div class="news">
                    <h2 style="color:#498AC3">院部新闻</h2>
                    <div class="much">
                        查看更多
                        <img src="../assets/右箭头.png" alt="">
                    </div>
                </div>
                <!-- 1 -->
                <div class="new-center">
                    <img src="../assets/手牵手.png" alt="">
                    <div class="new-right">
                        <div class="new-word1">
                            <p>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</p>
                            <span>2020-11-02</span>
                        </div>
                        <div class="new-word2">
                            <p>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</p>
                            <div class="new-img">
                                <div class="new-img1">
                                    <img class="newimg1" src="../assets/左箭头蓝.png" alt="">
                                    <img class="newimg2" src="../assets/左箭头蓝.png" alt="">
                                </div>
                                <p><span>1</span>/3</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 2 -->
                <div class="new-center">
                    <img src="../assets/手牵手.png" alt="">
                    <div class="new-right">
                        <div class="new-word1">
                            <p>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</p>
                            <span>2020-11-02</span>
                        </div>
                        <div class="new-word2">
                            <p>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</p>
                            <div class="new-img">
                                <div class="new-img1">
                                    <img class="newimg1" src="../assets/左箭头蓝.png" alt="">
                                    <img class="newimg2" src="../assets/左箭头蓝.png" alt="">
                                </div>
                                <p><span>2</span>/3</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 3 -->
                <div class="new-center">
                    <img src="../assets/手牵手.png" alt="">
                    <div class="new-right">
                        <div class="new-word1">
                            <p>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</p>
                            <span>2020-11-02</span>
                        </div>
                        <div class="new-word2">
                            <p>传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...</p>
                            <div class="new-img">
                                <div class="new-img1">
                                    <img class="newimg1" src="../assets/左箭头蓝.png" alt="">
                                    <img class="newimg2" src="../assets/左箭头蓝.png" alt="">
                                </div>
                                <p><span>3</span>/3</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 三个方块 -->
                <div class="new-text">
                    <div class="new-text1">
                        传承八一精神 凝聚奋进力量|旅游与 服务
                        系第一第二党支部开展主题...
                        <p><img src="../assets/时间.png" alt="">2022-11-02</p>
                    </div>
                    <div class="new-text1">
                        传承八一精神 凝聚奋进力量|旅游与 服务
                        系第一第二党支部开展主题...
                        <p><img src="../assets/时间.png" alt="">2022-11-02</p>
                    </div>
                    <div class="new-text1">
                        传承八一精神 凝聚奋进力量|旅游与 服务
                        系第一第二党支部开展主题...
                        <p><img src="../assets/时间.png" alt="">2022-11-02</p>
                    </div>
                </div>
            </div>
            <!-- 党团建设 -->
            <div class="new-bottom">
                <div class="new-bottom1">
                    <div class="new-left">
                        <ul>
                            <li>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                            </li>
                            <li>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                            </li>
                            <li>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                            </li>
                            <li>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                            </li>
                        </ul>
                    </div>
                    <div class="new-right">
                        <img src="../assets/未标题-1-min.png" alt="">
                    </div>
                    <div class="new-left">
                        <ul>
                            <li>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                            </li>
                            <li>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                            </li>
                            <li>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                            </li>
                            <li>
                                <p class="new-left-text">中餐学院2022级新生军训川圆满闭营，中餐学院2022级新生军训…</p>
                                <div class="new-color">28<p>2019-01</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 技能大赛 -->
        <div class="skill">
            <div class="skill-top">
                <h2 style="color:#498AC3">院部新闻</h2>
                <div class="much">
                    查看更多
                    <img src="../assets/右箭头.png" alt="">
                </div>
            </div>
            <div class="skill-content">
                <t-swiper class="tdesign-demo-block--swiper" type="card" :height="240">
                    <t-swiper-item v-for="item in 4" :key="item">
                        <div class="demo-item"><img src="../assets/技能.png" alt=""></div>
                    </t-swiper-item>
                </t-swiper>
            </div>
        </div>
        <!-- 教研成果 -->
        <div class="research">
            <div class="resear">
                <div class="resear-top">
                    <p class="resear-color" style="color: #F5F9FD;">JIAOYAN CHENGGUO </p>
                    <h2 style="color: #498AC3;">教研成果</h2>
                </div>
                <div class="resear-content">
                    <div class="resear-first">
                        <img src="../assets/12-min.png" alt="">
                        <p>山东城院“五心工程”温暖校园</p>
                        <div class="resear-text">
                            3月24日，一场别开生面的"平台通过网络直播的形式拉开帷幕…
                        </div>
                    </div>
                    <div class="resear-first">
                        <img src="../assets/13-min.png" alt="">
                        <p>划重点!一图读懂山东城院“十四五”发展规划</p>
                        <div class="resear-text">
                            3月20日下午，烟台市高新区管委副主任李如鹏、市教育局高新区分局…
                        </div>
                    </div>
                    <div class="resear-first">
                        <img src="../assets/13-min.png" alt="">
                        <p>划重点!一图读懂山东城院“十四五”发展规划</p>
                        <div class="resear-text">
                            3月20日下午，烟台市高新区管委副主任李如鹏、市教育局高新区分局…
                        </div>
                    </div>
                    <div class="resear-first">
                        <img src="../assets/13-min.png" alt="">
                        <p>划重点!一图读懂山东城院“十四五”发展规划</p>
                        <div class="resear-text">
                            3月20日下午，烟台市高新区管委副主任李如鹏、市教育局高新区分局…
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 学生动态 -->
        <div class="student">
            <div class="student-top">
                <h2 style="color:#498AC3">学生动态</h2>
                <div class="much">
                    查看更多
                    <img src="../assets/右箭头.png" alt="">
                </div>
            </div>
            <div class="student-content">
                <div class="student-left">
                    <img src="../assets/迎新1.png" alt="">
                    <p>迎新晚会·独唱</p>
                    <button>更多+</button>
                </div>
                <div class="student-right">
                    <div class="student1">
                        <img src="../assets/迎新2.png" alt="">
                        <p>迎新晚会现代舞</p>
                    </div>
                    <div class="student1">
                        <img src="../assets/2.png" alt="">
                        <p>运动会</p>
                    </div>
                    <div class="student1">
                        <img src="../assets/迎新4.png" alt="">
                        <p>运动会全景</p>
                    </div>
                    <div class="student1">
                        <img src="../assets/迎新5.png" alt="">
                        <p>才艺展示</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 友情链接 -->
        <div class="link">
            <ul>
                <li><a href="#" style="font-weight: bold;font-size: 18px;">友情链接</a></li>
                <li><a href="#">中华人民共和国</a></li>
                <li><a href="#">山东教育厅</a></li>
                <li><a href="#">山东省科学技术厅</a></li>
                <li><a href="#">中国高职专教育网</a></li>
                <li><a href="#">山东省科学技术厅</a></li>
                <li><a href="#">中国高职专教育网</a></li>
            </ul>
        </div>
        <!-- 联系我们 -->
        <div class="footer">
            <div class="foot">
                <div class="foot-left">
                    <p style="font-size: 20px; line-height: 3rem; color: #fff">联系我们</p>
                    <ul>
                        <li>
                            <p>办公室：</p>0535-2246666
                        </li>
                        <li>
                            <p>办公室：</p>0535-2246666
                        </li>
                        <li>
                            <p>招生咨询：</p>0535-2246625
                        </li>
                        <li>
                            <p>官网：</p>www.sdcc.edu.cn
                        </li>
                        <li>
                            <p>邮箱：</p>sdccxy@126.com
                        </li>
                        <li>
                            <p>校址：</p>山东省烟台市高新区海天路1001号
                        </li>
                    </ul>

                </div>
                <div class="foot-center">
                    <img src="../assets/微信图片_20240516155954-min.png" alt="">
                </div>
                <div class="footer-img">
                    <img src="../assets/微信.png" alt="">
                    <img src="../assets/微博.png" alt="">
                </div>
            </div>
            <div class="foot-text">
                Copyright @山东省城市服务技师学院版权所有
            </div>
        </div>
    </div>
</template>

<script setup>
import $ from "jquery";
$(function () {
  $('.new-center:first').show().siblings('.new-center').hide()
  console.log(123);
  var index = 0;
  $('.newimg2').click(() => {
    index++;
    console.log(index);
    if (index < 3) {
      $('.new-center').eq(index).show().siblings('.new-center').hide()
    } else {
      index = -1;
    }
  })
  $('.newimg1').click(() => {
    index--;
    if (index >= 0) {
      $('.new-center').eq(index).show().siblings('.new-center').hide()
    } else {
      index = 3;
    }
  })
})
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#school {
    width: 100%;
}

// 导航
.index {
    .index-content {
        width: 80%;
        margin: auto;
        display: flex;
        padding-top: 10px;
        position: relative;
    }

    background-color: #680104;

    img {
        width: 20%;
        height: 70px;
    }
}

.index-top {
    position: absolute;
    top: 36px;
    left: 260px;

    ul {
        display: flex;
        list-style: none;

        li {
            color: #fff;
            font-size: 18px;
            margin-left: 20px;
            padding-bottom: 7px;

            a {
                text-decoration: none;
                color: #fff;
            }
        }

        li:hover {
            border-bottom: 3px solid #C60000;
        }
    }


}

// 轮播图
.demo-item {
    width: 100%;
    height: 600px;

    img {
        width: 100%;
        height: 600px;
    }
}

// 院部新闻
.new {
    width: 100%;
    margin-top: 40px;

    .new-content {
        width: 80%;
        margin: auto;
    }

    // 标题
    .news {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-right: 22px;
        color: #8F8F8F;

        img {
            width: 2%;
            position: absolute;
        }
    }

    // 内容
    .new-center {
        width: 100%;
        display: flex;
        margin-top: 20px;

        img {
            width: 49%;
            height: 330px;
        }

        .new-right {
            width: 50%;
            margin-left: 20px;
            border: 3px solid #EDEDED;
            border-radius: 10px;

            .new-word1 {
                padding: 10px;
                padding-top: 25px;
                position: relative;

                p {
                    font-size: 20px;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #8F8F8F;
                }

                span {
                    width: 21%;
                    text-align: center;
                    color: #498AC3;
                    position: absolute;
                    right: 0px;
                    top: 87px;
                    background-color: #fff;
                }
            }

            .new-word2 {
                margin-top: 50px;
                font-size: 18px;
                padding: 10px;

                .new-img {
                    margin-top: 80px;
                    display: flex;
                    justify-content: space-between;

                    .new-img1 {
                        img {
                            width: 30%;
                            height: 40px;
                            margin-right: 25px;
                        }

                        img:nth-child(2) {
                            transform: rotateY(180deg);
                        }
                    }

                    p {
                        padding-right: 10px;
                        color: #9A9A9A;

                        span {
                            color: #065EAD;
                            font-size: 30px;
                        }
                    }
                }
            }
        }
    }

    // 三个方块
    .new-text {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        .new-text1 {
            border: 3px solid #F5F5F5;
            width: 32%;
            padding: 15px;

            p {
                margin-top: 40px;
                width: 23%;
                float: right;
                font-size: 14px;
                position: relative;
                color: #4081BD;

                img {
                    width: 23%;
                    position: absolute;
                    left: -20px;
                }
            }
        }

        .new-text1:hover {
            background-color: #ABC9E5;
        }
    }

    // 党团建设
    .new-bottom {
        width: 100%;
        margin-top: 30px;
        background-color: #F3F3F3;

        .new-bottom1 {
            width: 80%;
            margin: auto;
            padding: 20px 0px;
            display: flex;
            justify-content: space-between;

            .new-left {
                width: 34%;

                ul {
                    list-style: none;

                    li {
                        display: flex;
                        margin: 12px 0px;
                        background-color: #fff;

                        .new-color {
                            width: 22%;
                            background-color: #005BAC;
                            color: #fff;
                            font-size: 20px;
                            padding: 10px 5px;
                            text-align: center;

                            p {
                                font-size: 13px;
                            }
                        }

                        .new-left-text {
                            border: 1px solid #F5F5F5;
                            font-size: 14px;
                            padding: 10px;
                        }
                    }
                }

            }

            .new-right {
                width: 30%;
                height: 20rem;

                img {
                    width: 100%;
                    height: 20rem;
                }
            }
        }


    }
}

// 技能大赛
.skill {
    width: 80%;
    margin: auto;
    margin-top: 40px;

    .skill-top {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: relative;
        padding-right: 22px;
        color: #8F8F8F;

        img {
            width: 2%;
            position: absolute;
        }
    }

    .skill-content {
        width: 100%;
        margin-top: 20px;

        .demo-item {
            img {
                width: 100%;
                height: 20rem;
            }
        }
    }
}

// 科研成果
.research {
    width: 100%;
    background-color: #D6E6F6;
    margin-top: 40px;

    .resear {
        width: 80%;
        margin: auto;
        padding-top: 40px;

        .resear-top {
            position: relative;
            text-align: center;

            h2 {
                position: absolute;
                left: 34rem;
                top: -0.5rem;
            }
        }

        .resear-content {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            padding-bottom: 30px;

            .resear-first {
                border-radius: 10px;
                width: 22%;
                position: relative;

                img {
                    width: 100%;
                    height: 10rem;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    background-color: rgba(51, 57, 61, 0.5);
                }

                p {
                    position: absolute;
                    top: 4rem;
                    padding: 0px 1rem;
                    color: #E9F0F9;
                    text-align: center;
                }

                .resear-text {
                    text-align: center;
                    background-color: #fff;
                    padding: 34px 20px;
                    font-size: 14px;
                    letter-spacing: 2px;
                    margin-top: -3px;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
            }

            .resear-first:hover {
                margin-top: -20px;

                img {
                    background-color: rgba(135, 206, 250, 0.5);
                }

                .resear-text {
                    color: #4081BD;
                }
            }
        }
    }
}

// 学生动态
.student {
    width: 80%;
    margin: auto;
    margin-top: 40px;

    .student-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-right: 22px;
        color: #8F8F8F;

        img {
            width: 2%;
            position: absolute;
        }
    }

    .student-content {
        display: flex;
        width: 100%;
        margin-top: 20px;

        .student-left {
            width: 49%;
            margin-top: 5px;
            position: relative;

            img {
                width: 100%;
                height: 21rem;
                border-radius: 10px;
            }

            p {
                width: 100%;
                text-align: center;
                position: absolute;
                top: 8rem;
                letter-spacing: 2px;
                font-size: 1.5rem;
                color: #fff;
            }

            button {
                position: absolute;
                top: 11rem;
                left: 14rem;
                width: 20%;
                font-size: 16px;
                line-height: 2.5rem;
                color: #fff;
                background-color: #E69C19;
                border: none;
            }
        }

        .student-right {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            margin-left: 20px;

            .student1 {
                width: 50%;
                padding: 5px;
                position: relative;

                img {
                    width: 100%;
                    height: 10rem;
                    border-radius: 10px;
                }

                p {
                    border-radius: 10px;
                    width: 96%;
                    line-height: 2rem;
                    text-align: center;
                    position: absolute;
                    top: 8.4rem;
                    color: #fff;
                    background-color: rgba(0, 0, 0, 0.4);
                }
            }

            .student1:nth-child(3) {
                margin-top: -28px;
            }

            .student1:nth-child(4) {
                margin-top: -28px;
            }

        }

    }
}

// 友情链接
.link {
    width: 80%;
    margin: auto;
    margin-top: 20px;

    ul {
        list-style: none;
        display: flex;

        li {
            margin-right: 3rem;

            a {
                text-decoration: none;
                color: #2E2E2E;
                font-size: 14px;
            }
        }
    }
}

// 联系我们
.footer {
    width: 100%;
    margin-top: 20px;
    background-image: url(../assets/微信图片_20240516160002-min.jpg);

    .foot {
        width: 80%;
        margin: auto;
        padding: 25px 0px;
        box-sizing: border-box;
        display: flex;

        .foot-left {
            width: 29%;

            ul li{
                color: #fff;
                width: 100%;
                line-height: 2rem;
                display: flex;
                p {
                    width: 25%;
                    letter-spacing: 25%;
                    text-align: justify;
                }
            }
        }

        .foot-center {
            width: 40%;

            img {
                width: 100%;
                margin-top: 60px;
            }
        }
        .footer-img{
            display: flex;
            margin: 30px 100px;
            img{
                width: 26%;
                height: 50px;
                margin-top: 60px;
            }
            img:nth-child(1){
                width: 31%;
                height: 57px;
                margin-right: 50px;
                margin-top: 57px
            }
        }
    }
    .foot-text{
        width: 100%;
        text-align: center;
        color: #8CA8C8;
        padding-bottom: 10px;
    }
}
</style>